<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="apple-mobile-web-app-capable" content="no"/>
    <meta name="wap-font-scale" content="no">
    <meta content="telephone=no" name="format-detection">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>论坛列表</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css"/>
    <link rel="stylesheet" href="../css/swiper.min.css">
    <link rel="stylesheet" href="../css/common.css"/>
    <link rel="stylesheet" href="../css/app.css?a=1111"/>
</head>
<body class="isHide">
<div class="ft-wrap height top bigger">
    <!--顶部悬浮导航-->
    <div class="ft-head-nav">
        <a class="ft-h-back" href="javascript:;">返回</a>
        <span class="ft-head-text">Forum</span>
        <a class="ft-h-more add-icon" href="javascript:;" id="releaseBtn">更多</a>
        <div class="forum-menu">
            <i class="arrow-top"></i>
            <div class="ft-overflow">
                <div class="forum-menu-c">
                    <a href="#">Tops</a>
                    <a href="#">Else</a>
                    <a href="#">Shoes</a>
                    <a href="#">Tops</a>
                    <a href="#">Else</a>
                    <a href="#">Shoes</a>
                    <a href="#">Tops</a>
                    <a href="#">Else</a>
                    <a href="#">Shoes</a>
                    <a href="#">Tops</a>
                    <a href="#">Else</a>
                    <a href="#">Shoes</a>
                </div>
            </div>
        </div>
    </div>
    <div class="pos-fix nav-list background">
        <div class="swiper-container" id="inNav">
            <div class="swiper-wrapper">
                <div class="swiper-slide active" data-id="Latest">Latest</div>
                <div class="swiper-slide " data-id="Shirt">Shirt</div>
                <div class="swiper-slide " data-id="Tops">Tops</div>
                <div class="swiper-slide " data-id="Shoes">Shoes</div>
                <div class="swiper-slide " data-id="Hobbies">Hobbies</div>
            </div>
        </div>
    </div>
    <!--中间滚动内容-->
    <div class="ft-container no-padding height background">
        <div class="swiper-container product-swiper" id="productSwiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide" id="Latest">
                    <div class="ft-overflow" id="LatestFlow">
                        <div class="ft-overflow-box">
                            <div class="forum-list">
                                <div class="ft-module no-top no-mar evaluate-box">
                                    <div class="module-hd has-icon no-border bigger">
                                        <i class="evaluate-head"><img src="../img/ft-hd1.jpg"></i>
                                        <label class="">Jason Smith</label>
                                        <span class="">2017-03-24  12:53:02</span>
                                    </div>
                                    <div class="module-bd no-pad">
                                        <div class="evaluate-shop-intro">
                                            <div class="evaluate-cont">
                                                <span class="no-border">"very happy. Alittle. for price and quality. more the worth hem job very happy. Alittle. for price and</span>
                                                <div class="upload-flies box-list">
                                                    <ul class="row-3 width">
                                                        <li>
                                                            <label>
                                                                <img class="lazy" data-original="../img/ft-hd1.jpg"
                                                                     src="../img/pro-error.jpg">
                                                                <span class="pro-img-loading"></span>
                                                            </label>
                                                        </li>
                                                        <li>
                                                            <label>
                                                                <img class="lazy" data-original="../img/ft-hd2.jpg"
                                                                     src="../img/pro-error.jpg">
                                                                <span class="pro-img-loading"></span>
                                                            </label>
                                                        </li>
                                                        <li>
                                                            <label>
                                                                <img class="lazy" data-original="../img/ft-hd3.jpg"
                                                                     src="../img/pro-error.jpg">
                                                                <span class="pro-img-loading"></span>
                                                            </label>
                                                        </li>
                                                        <li>
                                                            <label>
                                                                <img class="lazy" data-original="../img/ft-hd4.jpg"
                                                                     src="../img/pro-error.jpg">
                                                                <span class="pro-img-loading"></span>
                                                            </label>
                                                        </li>
                                                        <li>
                                                            <label>
                                                                <img class="lazy" data-original="../img/ft-hd5.jpg"
                                                                     src="../img/pro-error.jpg">
                                                                <span class="pro-img-loading"></span>
                                                            </label>
                                                        </li>
                                                        <li>
                                                            <label>
                                                                <img class="lazy" data-original="../img/ft-hd6.jpg"
                                                                     src="../img/pro-error.jpg">
                                                                <span class="pro-img-loading"></span>
                                                            </label>
                                                        </li>
                                                        <li>
                                                            <label>
                                                                <img class="lazy" data-original="../img/ft-hd7.jpg"
                                                                     src="../img/pro-error.jpg">
                                                                <span class="pro-img-loading"></span>
                                                            </label>
                                                        </li>
                                                        <li>
                                                            <label>
                                                                <img class="lazy" data-original="../img/ft-hd8.jpg"
                                                                     src="../img/pro-error.jpg">
                                                                <span class="pro-img-loading"></span>
                                                            </label>
                                                        </li>
                                                        <li>
                                                            <label>
                                                                <img class="lazy" data-original="../img/ft-hd11.jpg"
                                                                     src="../img/pro-error.jpg">
                                                                <span class="pro-img-loading"></span>
                                                            </label>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="evaluate-shop-handle clearfix">
                                            <a class="forum-reply" href="#"><i class="ft-sprite reply-icon"></i>6875</a>
                                            <a class="forum-praise" href="javascript:;"><i
                                                    class="ft-sprite praise-icon"></i><span>105</span></a>
                                        </div>
                                    </div>
                                </div>
                                <div class="ft-module evaluate-box">
                                    <div class="module-hd has-icon no-border bigger">
                                        <i class="evaluate-head"><img src="../img/ft-hd1.jpg"></i>
                                        <label class="">Jason Smith</label>
                                        <span class="">2017-03-24  12:53:02</span>
                                    </div>
                                    <div class="module-bd no-pad">
                                        <div class="evaluate-shop-intro">
                                            <div class="evaluate-cont">
                                                <span class="no-border">"very happy. Alittle. for price and quality. more the worth hem job very happy. Alittle. for price and"very happy. Alittle. for price and quality. more the worth hem job very happy. Alittle. for price and</span>
                                            </div>
                                        </div>
                                        <div class="evaluate-shop-handle clearfix">
                                            <a class="forum-reply" href="#"><i class="ft-sprite reply-icon"></i>6875</a>
                                            <a class="forum-praise" href="javascript:;"><i
                                                    class="ft-sprite praise-icon"></i><span>105</span></a>
                                        </div>
                                    </div>
                                </div>
                                <div class="ft-module evaluate-box">
                                    <div class="module-hd has-icon no-border bigger">
                                        <i class="evaluate-head"><img src="../img/ft-hd1.jpg"></i>
                                        <label class="">Jason Smith</label>
                                        <span class="">2017-03-24  12:53:02</span>
                                    </div>
                                    <div class="module-bd no-pad">
                                        <div class="evaluate-shop-intro">
                                            <div class="evaluate-cont">
                                                <span class="no-border">"very happy. Alittle. for price and quality. more the worth hem job very happy. Alittle. for price and</span>
                                                <div class="upload-flies box-list" data-list="1">
                                                    <ul class="row-1 width">
                                                        <li>
                                                            <label>
                                                                <img class="lazy" data-original="../img/ft-hd10.jpg"
                                                                     src="../img/pro-error.jpg">
                                                                <span class="pro-img-loading"></span>
                                                            </label>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="evaluate-shop-handle clearfix">
                                            <a class="forum-reply" href="#"><i class="ft-sprite reply-icon"></i>6875</a>
                                            <a class="forum-praise" href="javascript:;"><i
                                                    class="ft-sprite praise-icon"></i><span>105</span></a>
                                        </div>
                                    </div>
                                </div>
                                <div class="ft-module evaluate-box">
                                    <div class="module-hd has-icon no-border bigger">
                                        <i class="evaluate-head"><img src="../img/ft-hd1.jpg"></i>
                                        <label class="">Jason Smith</label>
                                        <span class="">2017-03-24  12:53:02</span>
                                    </div>
                                    <div class="module-bd no-pad">
                                        <div class="evaluate-shop-intro">
                                            <div class="evaluate-cont">
                                                <span class="no-border">"very happy. Alittle. for price and quality. more the worth hem job very happy. Alittle. for price and</span>
                                                <div class="upload-flies box-list" data-type="square">
                                                    <ul class="row-3 width">
                                                        <li>
                                                            <label>
                                                                <img class="lazy"
                                                                     data-original="../img/banner-default.jpg"
                                                                     src="../img/pro-error.jpg">
                                                                <span class="pro-img-loading"></span>
                                                            </label>
                                                        </li>
                                                        <li>
                                                            <label>
                                                                <img class="lazy" data-original="../img/product2.jpg"
                                                                     src="../img/pro-error.jpg">
                                                                <span class="pro-img-loading"></span>
                                                            </label>
                                                        </li>
                                                        <li>
                                                            <label>
                                                                <img class="lazy" data-original="../img/wel-bg.jpg"
                                                                     src="../img/pro-error.jpg">
                                                                <span class="pro-img-loading"></span>
                                                            </label>
                                                        </li>
                                                        <li>
                                                            <label>
                                                                <img class="lazy" data-original="../img/product4.jpg"
                                                                     src="../img/pro-error.jpg">
                                                                <span class="pro-img-loading"></span>
                                                            </label>
                                                        </li>
                                                        <li>
                                                            <label>
                                                                <img class="lazy"
                                                                     data-original="../img/shop-banner2.jpg"
                                                                     src="../img/pro-error.jpg">
                                                                <span class="pro-img-loading"></span>
                                                            </label>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="evaluate-shop-handle clearfix">
                                            <a class="forum-reply" href="#"><i class="ft-sprite reply-icon"></i>6875</a>
                                            <a class="forum-praise" href="javascript:;"><i
                                                    class="ft-sprite praise-icon"></i><span>105</span></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="list-loading">
                                <i><img src="../img/loading.gif"></i>
                                <span>Loading</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--显示产品大图-->
    <div class="ft-pop-disk product-big animated-left">
        <div class="ft-pop-box">
            <div class="ft-disk-hd">
                <span class="ft-disk-title" id="productLength"><i>12</i> of <i>12</i></span>
                <a class="ft-close-btn"><i class="ft-sprite"></i></a>
            </div>
            <div class="ft-disk-bd">
                <div class="product-big-list">
                    <div class="swiper-container" id="productBig">
                        <div class="swiper-wrapper"></div>
                        <div class='swiper-loading2'></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--置顶按钮-->
    <a class="pos-fix go-top" href="javascript:;" id="goTop"><img src="../img/icon-top.png"></a>
</div>

<script type="text/template" id="productListCont">
    <div class="ft-module evaluate-box">
        <div class="module-hd has-icon no-border bigger">
            <i class="evaluate-head"><img src="../img/ft-hd1.jpg"></i>
            <label class="">Jason Smith</label>
            <span class="">2017-03-24  12:53:02</span>
        </div>
        <div class="module-bd no-pad">
            <div class="evaluate-shop-intro">
                <div class="evaluate-cont">
                    <span class="no-border">"very happy. Alittle. for price and quality. more the worth hem job very happy. Alittle. for price and</span>
                    <div class="upload-flies box-list" data-type="square" data-imgID="%*imgID*%">
                        <ul class="row-3 width">
                            <li>
                                <label>
                                    <img class="lazy" data-original="../img/banner-default.jpg"
                                         src="../img/pro-error.jpg">
                                    <span class="pro-img-loading"></span>
                                </label>
                            </li>
                            <li>
                                <label>
                                    <img class="lazy" data-original="../img/product2.jpg"
                                         src="../img/pro-error.jpg">
                                    <span class="pro-img-loading"></span>
                                </label>
                            </li>
                            <li>
                                <label>
                                    <img class="lazy" data-original="../img/wel-bg.jpg"
                                         src="../img/pro-error.jpg">
                                    <span class="pro-img-loading"></span>
                                </label>
                            </li>
                            <li>
                                <label>
                                    <img class="lazy" data-original="../img/product4.jpg"
                                         src="../img/pro-error.jpg">
                                    <span class="pro-img-loading"></span>
                                </label>
                            </li>
                            <li>
                                <label>
                                    <img class="lazy" data-original="../img/shop-banner2.jpg"
                                         src="../img/pro-error.jpg">
                                    <span class="pro-img-loading"></span>
                                </label>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="evaluate-shop-handle clearfix">
                <a class="forum-reply" href="#"><i class="ft-sprite reply-icon"></i>6875</a>
                <a class="forum-praise" href="javascript:;"><i
                        class="ft-sprite praise-icon"></i><span>105</span></a>
            </div>
        </div>
    </div>
</script>
<script src="../js/jquery-1.11.1.min.js"></script>
<script src="../js/swiper.jquery.min.js"></script>
<script src="../js/jquery.lazyload.min.js"></script>
<script src="../js/ft-common.js"></script>
<script src="../js/pageScript.js"></script>
<script>
    $(function () {
        //横向菜单
        var nav = slideHorizontalNav("#inNav", {
            hasPlaceholder: false,
            clickFun: function (index) {
                product.slideTo(index)
            }
        });

        //初始化产品列表左右滑动
        var scrollEle;
        var _clear_timer_ = 0;
        var product = common.newSwiper("#productSwiper", 1, {
            autoplay: 0,
            pagination: null,
            loop: false,
            autoplayDisableOnInteraction: false,
            lazyLoading: false,
            onInit: function (s) {
                var str = "";
                for (var i = 0; i < nav.length - 1; i++) {
                    str += "<div class='swiper-slide' id='" + nav.navID[i + 1] + "'>" +
                            "<div class='swiper-loading'></div>" +
                            "<div class='ft-overflow' id='" + nav.navID[i + 1] + "Flow'>" +
                            "   <div class='ft-overflow-box'>" +
                            "       <div class='forum-list'></div>" +
                            "   </div>" +
                            "</div>" +
                            "</div>";
                }
                s.appendSlide(str);
                s.update(true, true);
            },
            onSlideChangeEnd: function (s) {
                clearTimeout(_clear_timer_);
                nav.element[s.activeIndex].click();
                var $container = s.container;
                var $active = $container.find(".swiper-slide-active");
                var $loading = $active.find(".swiper-loading");
                var $productList = $active.find(".forum-list");
                var productHtml = $("#productListCont").html().replace("%*imgID*%", $active.attr("id"));
                var resultHtml = "";
                if (!$active.find(".ft-overflow").data("scroll")) {
                    console.log("执行");
                    scrollEle = scrollFun($active.find(".ft-overflow").attr("id"));
                    console.log(scrollEle);
                }

                if ($(".upload-flies[data-imgID=" + $active.attr("id") + "]").length > 0) {
                    proImgLazyLoad(".upload-flies[data-imgID=" + $active.attr("id") + "]", "#productSwiper .swiper-slide-active .ft-overflow", function (ele) {
                        ele.removeClass("new-pro-img");
                    });
                }
                if ($loading.css("display") == "block") {
                    _clear_timer_ = setTimeout(function () {
                        $loading.hide();
                        for (var i = 0; i < 3; i++) {
                            resultHtml += productHtml;
                        }
                        $productList.append(resultHtml);
                        $productList.find(".evaluate-box").addClass("no-mar no-top");
                        setImgBox(".upload-flies[data-imgID=" + $active.attr("id") + "]", "#productSwiper .swiper-slide-active .ft-overflow");
                        $productList.after("<div class='list-loading'><i><img src='../img/loading.gif'></i><span>Loading</span></div>");
                    }, 1000);
                }
            }
        });

        //页面滚动
        function scrollFun(ele) {
            var ajaxDataNum = 0, downflag = false;
            return pageScroll({
                hasTop: true,
                element: "#" + ele,
                ajaxFun: function () {
                    var $active = $("#productSwiper .swiper-slide-active");
                    if (!downflag) {
                        downflag = true;
                        var list = $("#productListCont").html().replace("%*imgID*%", $active.attr("id"));
                        var str = "";
                        for (var i = 0; i < 2; i++) {
                            str += list;
                        }
                        setTimeout(function () {
                            ajaxDataNum++;
                            console.log(ajaxDataNum);
                            if (ajaxDataNum >= 5) {
                                $active.find(".list-loading").html("No more items");
                                return false;
                            }
                            $active.find(".forum-list").append(str);
                            setImgBox(".upload-flies[data-imgID=" + $active.attr("id") + "]", "#productSwiper .swiper-slide-active .ft-overflow");
                            downflag = false;
                        }, 1000);
                    }
                }
            });
        }

        scrollEle = scrollFun("LatestFlow");

        function setImgBox(img, ele) {
            var $upload = $(".upload-flies");
            var w_w = $(window).width() - 20;
            $upload.each(function () {
                var list = $(this).data("list");
                var type = $(this).data("type");
                list = !list ? 3 : parseInt(list);
                var cell_w = w_w / list;
                type != "square" ?
                        $(this).find("label").css({"width": cell_w + "px"}) :
                        $(this).find("label").css({"width": cell_w + "px", "height": cell_w + "px"});
            });
            proImgLazyLoad(img, ele, function () {
                var that = $(this);
                var ceil_w = Math.ceil(that.parents("label").width());
                var ceil_h = Math.ceil(that.parents("label").height());
                common.setImageLayout(this, ceil_w, ceil_h);
            });
        }

        $(window).resize(function () {
            setImgBox(".upload-flies", "#LatestFlow");
        }).trigger("resize");

        //显示评价大图
        $(document).on("click", ".upload-flies li", function (e) {
            var that = this;
            e.stopPropagation();
            showBigImg({
                loadingEle: ".swiper-loading2",
                swiperEle: null,
                clickEle: that,
                animateEle: ".product-big"
            })
        });

        //点赞
        $(document).on("click", ".forum-praise", function () {
            $(this).toggleClass("active");
            var span = $(this).find("span");
            var num = parseInt(span.text());
            !$(this).hasClass("active") ? span.text(num - 1) : span.text(num + 1);
        });

        //显示更多菜单
        $(document).on("click", "#releaseBtn", function (e) {
            e.stopPropagation();
            $(".forum-menu").toggle();
        });
        //关闭更多
        $(document).on("click", function (e) {
            e.stopPropagation();
            if ($(e.target).parents(".forum-menu-c") && $(e.target).parents(".forum-menu-c").length == 0) {
                $(".forum-menu").hide();
            }
        });
    })
</script>
</body>
</html>